<template>
	<view>
		<view class="content">
			<view class="order_box">
				<view class="number">订单编号：{{goods.order_no}}</view>
			<!-- 	<view class="state">订单已完成</view> -->
			</view>
			<view class="goods_box" v-for="(c,index) in goods.data" :key="'goods' + index">
				<image class="goods_img" :src="c.image || ''" mode="scaleToFill"></image>
				<view class="title">{{ c.name }}</view>
				<view class="num">x{{ c.quantity }}</view>
				
				
				<view class="money" style="    top: 50px;" v-if='goods.pay_type==1'>￥{{ c.price }}</view>
			<!-- 		<view class="money" style="    top: 50px;" v-if='goods.pay_type==2'>￥{{ c.price }}+{{ c.znj}}%助农劵</view>
						<view class="money"style="    top: 50px;" v-if='goods.pay_type==3'>积分：{{ c.znb}}</view> -->
				<view class="time" v-if="c.sku_dkr ">规格：{{ c.sku_dkr }}</view>
				<view class="time" v-else>规格：默认</view>
			</view>
		</view>

		<view class="give_box">
			<view class="x_title">订单信息</view>
			<view class="text_list" v-if="goods.sz=='0'">
				<view class="text">物流单号</view>
				<view class="text02">{{goods.express_code}}</view>
			</view>
			<view class="text_list" v-if="goods.sz=='1' ">
				<view class="text">核销码</view>
				<view class="text02" >{{goods.hxm}}</view>
			</view>
			
			<view class="text_list"  v-if="goods.sz=='0'">
				<view class="text">收货地址:</view>
				<view class="text02">{{goods.address_info}}</view>
			</view>
			
		<!-- 	<view class="text_list"  v-if="goods.sz=='1'">
				<view class="text">自提地址:</view>
				<view class="text02">{{goods.ziti}}</view>
			</view>
			
			<view class="text_list"  v-if="goods.sz=='0'">
				<view class="text">电话:</view>
				<view class="text02">{{goods.phone}}</view>
			</view>
			<view class="text_list"  v-if="goods.sz=='1'">
				<view class="text">网点电话:</view>
				<view class="text02">{{goods.ziti_phone}}</view>
			</view> -->
			<view class="text_list"  v-if="goods.sz=='0'">
				<view class="text">收货人:</view>
				<view class="text02">{{goods.consigner}}</view>
			</view>
			<view class="text_list">
				<view class="text">金额:</view>
				
				<view class="text02"  v-if='goods.pay_type==1'>￥{{ goods.pay_fee }}</view>
	<!-- 				<view class="text02"  v-if='goods.pay_type==2'>￥{{ goods.pay_fee }}+{{ goods.pay_znj}}助农劵</view> -->
						<view class="text02" v-if='goods.pay_type==2'>积分：{{ goods.pay_fee}}</view>
			</view>
			<view class="text_list" style="border-bottom:1px solid #f5f5f5">
				<view class="text">时间:</view>
				<view class="text02">{{goods.created_at}}</view>
			</view>
			<view class="text_list" style="padding-top: 20rpx;" v-if="goods.is_wx==9">
				<view class="text">支付方式:</view>
				<view class="text02">线下支付</view>
			</view>
			<view class="text_list">
				<view class="text">支付凭证:</view>
				<view class="t_img">
					<image class="img" :src="pay_img" @click="lookImg"></image>
				</view>
			</view>
			
		<!-- 	<view class="go_btn" v-if="goods.order_status == 3 && goods.express_code">
				<p :data-url="'/pages/mylist/logistics?id='+goods.id" @click="gotopage">查看物流</p>
			</view> -->
			<!-- <button class="contact" v-if="goods.sz == '1'" style="background: #0099ff;" @click="goMap"  :data-lat="goods.lat" :data-lng="goods.lng" :data-address="goods.ziti">
				<view class="text">前往自提</view>
			</button>
			 -->
			<button class="contact"  @click="openPhone">
				<view class="text">联系商家</view>
			</button>
		</view>
	</view>
</template>

<script>
	import Cfg from '../../common/config.js';
export default {
	data() {
		return {	
			goods:'',
			pay_img:'../../static/bg05.png'
		};
	},
	onLoad(e) {
		let me = this;

	
		me.Net._get('orderDetails',{id:e.id},(res)=>{
			if(res.code ==1){
				me.goods=res.data
				me.pay_img=Cfg.Setting.img+res.data.img
			  console.log(res.data)
			}
		});	
	},
	methods: {
		lookImg(){
			let _arr = [this.pay_img];
			uni.previewImage({
				urls: _arr,
				longPressActions: {
					success: function(data) {}
				}
			});
		},
		goMap(e){
			// #ifdef APP-PLUS
			uni.openLocation({
				latitude: Number(e.currentTarget.dataset.lat),
				longitude: Number(e.currentTarget.dataset.lng),
				name:'自提网点',
				address:e.currentTarget.dataset.address,
				success: function () {
					console.log('success')
				}
			});
			// #endif
			// #ifdef H5
			uni.navigateTo({
				url:'/pages/map/map',
				success(res) {
					res.eventChannel.emit('acceptDataFromOpenerPage', { lat: e.currentTarget.dataset.lat,lng:e.currentTarget.dataset.lng, address:e.currentTarget.dataset.address })
				}
			})
			// #endif
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.select = index;
		},
		openPhone(){
				let me = this;
			uni.showModal({
			    title: '客服热线',
			    content:me.goods.pp.phone,
			    success: function (res) {
			        if (res.confirm) {
			            //console.log('用户点击确定');
						uni.makePhoneCall({
						    phoneNumber: me.goods.pp.phone//仅为示例
						});
			        } else if (res.cancel) {
			            //console.log('用户点击取消');
			        }
			    }
			});
		},
	}
};
</script>

<style>
	
	page{
		background-color: #f8f8f8;
	}
	
	
.content {
	width: 94%;
	margin: 0 3%;
	background: #fff;
	border-radius: 10px;
	margin-top: 3%;
	padding:0 3vw;
	box-sizing: border-box;
	padding-bottom: 10px;
	display: inline-block;
}

.content .order_box {
	width: 100%;
	height: 40px;
	position: relative;
}

.content .order_box .number {
	font-size: 15px;
	color: #333;
	line-height: 40px;
	position: absolute;
	left: 10px;
}

.content .order_box .state {
	font-size: 15px;
	color: #176bff;
	line-height: 40px;
	position: absolute;
	right: 10px;
}

.content .goods_box {
	width: 100%;
	height: 100px;
	position: relative;
}

.content .goods_box .goods_img {
	width: 90px;
	height: 90px;
	border-radius: 6px;
	position: absolute;
	left: 10px;
}

.content .goods_box .title {
	font-size: 17px;
	color: #333;
	width: calc(100% - 160px);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	position: absolute;
	left: 110px;
}

.content .goods_box .num {
	font-size: 15px;
	color: #666;
	width: 50px;
	text-align: right;
	position: absolute;
	right: 10px;
}

.content .goods_box .norms{
	font-size: 15px;
	color: #999;
	position: absolute;
	left: 110px;
	top: 42px;
}

.content .goods_box .money {
	font-size: 17px;
	color: #FF3543;
	position: absolute;
	left: 110px;
	top: 62px;
}

.content .goods_box .time {
	font-size: 15px;
	color: #959595;
	position: absolute;
	left: 110px;
	bottom: 0px;
}

.give_box {
	width: 94%;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	margin-top: 3%;
	text-align: center;
	/* padding:0 3vw; */
	box-sizing: border-box;
	padding-bottom: 50rpx;
}

.give_box .x_title {
	width: 100%;
	height: 40px;
	font-size: 16px;
	color: #333;
	line-height: 40px;
	text-indent: 10px;
	text-align: left;
}

.give_box .text_list {
	width: 100%;
	align-items: flex-start;
	display: flex;
	padding-bottom: 20rpx;
}

.give_box .text_list .text {
	width: 200rpx;
	text-align: left;
	text-indent: 10px;
	font-size: 15px;
	color: #333;
	font-weight: bold;
}

.give_box .text_list .text02 {
	flex: 1;
	text-indent: 10px;
	font-size: 15px;
	color: #333;
	text-align: right;
	word-wrap:break-word;
	margin-right: 3vw;
}
.give_box .text_list .t_img{
	flex: 1;
	display: flex;
	padding: 0 15px;
	justify-content: flex-end;
}
.give_box .text_list .t_img .img{
	width: 15vw;
	height: 15vw;
	border-radius: 10rpx;
}

.give_box .contact {
	width: 80%;
	height: 50px;
	display: flex;
	justify-content: center;
	margin-top: 50rpx;
	background: #e63900;
	color: #FFFFFF;
	font-size: 34rpx;
}

.give_box .contact .icon {
	font-size: 18px;
	margin-right: 5px;
	line-height: 50px;
	font-weight: bold;
}

.give_box .contact .text {
	font-size: 17px;
	line-height: 50px;
}

.give_box image {
	width: 70%;
}
.btn1::after {
  border: 0; 
}

.give_box .go_btn{
	border-bottom:1px solid #f5f5f5;
	padding: 30rpx 3vw;
	width: 100%;
	text-align: right;
	color: #e63900;
	text-decoration: underline;
}
</style>
